<form nz-form [formGroup]="formModel">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">类型</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="type" nzShowSearch nzAllowClear nzPlaceHolder="请选择类型">
            <nz-option [nzLabel]="'不限'" [nzValue]="-1"></nz-option>
            <nz-option [nzLabel]="'接受'" [nzValue]="1"></nz-option>
            <nz-option [nzLabel]="'发送'" [nzValue]="2"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">模糊输入框</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入内容">
          <input type="text" id="content" nz-input formControlName="content" placeholder="请输入内容"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom" [ngClass]="isMobile? '': 'padding-left'" >
      <button (click)="submitForm()" *ngIf="!isMobile" nz-button nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button (click)="submitForm()" *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
    </div>
  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">

  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }"
            nzShowSizeChanger [nzPageSizeOptions]="pageHelper.pageSizeOptions"
            (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>主题</th>
      <th>消息内容</th>
      <th>设备号</th>
      <th>类型</th>
      <th>时间</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data;let i = index;">
      <tr>
        <td nzEllipsis>{{data.topic}}</td>
        <td nzEllipsis>{{data.content}}</td>
        <td nzEllipsis>{{data.deviceNo}}</td>
        <td nzEllipsis>
          <span *ngIf="data.type == 1">接收</span>
          <span *ngIf="data.type == 2">发送</span>
        </td>
        <td nzEllipsis>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
